<template>
  <div class="messagebox">
    <!-- 头部信息 -->
    <div class="message-header">
      <template v-if="customerList.length">
        <div class="header-left">
          <div class="custom-head">
            <Avatar mode="customer" :isTourist="isTourist" :size="32" />
          </div>
          <div class="custom-info" v-show="hasUserDetail">
            <div class="custom-name">
              <!-- 未知客户显示手机号，微信客服显示微信昵称，isKnown：1已知 0未知 -->
              <span>{{ titleName }}</span>
              <!-- 标签图标 -->
              <span v-if="tagIcon && titleName" :class="['tag-icon', 'iconfont', tagIcon]"></span>
              <!-- 客户在线状态 -->
              <div v-if="isIm" :class="['loginStatus',customerOnline?'in':'out']">
                <span class="quan"></span>
                <span class="text">{{ customerOnline ? $t('common.base.online') : $t('common.base.outline')}}</span>
              </div>
            </div>
            <div class="custom-company">
              {{ customerName }}
            </div>
          </div>
        </div>
        <div class="header-right">
          <el-button
            type="primary"
            size="mini"
            style="border-radius: 4px"
            @click="replyEmail(-1)"
            v-if="isMailIm"
          >
            {{ $t('common.base.reply') }}
          </el-button>
          <!-- 邀请游客登录 -->
          <el-button
            type="primary"
            size="mini"
            style="border-radius: 4px"
            @click="invitedToLogin"
            v-if="isTourist"
          >{{$t('im.imChat.components.messageBox.message.btn1')}}</el-button
          >
          <!-- conversationStatus 3已结束 不显示操作按钮 -->
          <el-button
            type="primary"
            size="mini"
            style="border-radius: 4px"
            @click="SessionForwarding"
            v-track="$track.formatParams('SESSIONS_FORWARDING')"
            v-if="conversationStatus !== 3"
          >{{$t('im.imChat.components.messageBox.message.btn2')}}</el-button
          >
          <el-button
            type="danger"
            size="mini"
            style="border-radius: 4px"
            @click="EndSession"
            v-if="conversationStatus !== 3"
            v-track="$track.formatParams('SESSIONS_END')"
          >{{$t('im.imChat.components.messageBox.message.btn3')}}</el-button
          >
        </div>
      </template>
    </div>
    <div :class="{'messagebox-content': true, 'messagebox-content-full': isMailIm}" >
      <!-- 聊天记录 -->
      <chattingRecords
        :msg-list="msgList"
        :is-show-more="isShowMore"
        :source="source"
        :conversation-number="conversationNumber"
        :hx-id-obj="hxIdObj"
        @loadMoreMsgs="loadMoreMsgs"
        ref="msgContent"
        :user-detail="userDetail"
        mode="chat"
        :clientName="clientName"
        :aiRobotId="aiRobotId"
        :aiRobotAppId="aiRobotAppId"
        :conversationId="conversationId"
        :isAutoAIReply="aiAutoReply"
      />
      <div v-if="isCommonIm" class="messagebox-content-bottom">
        <!-- 发送离线消息 -->
        <OfflineMessage v-if="showOfflineMessage" :msgList="msgList" :userDetail="userDetail" :conversationId="hxIdObj.conversationId"  />
      </div>
    </div>
    <!-- 消息发送 -->
    <div v-if="isCommonIm" class="messagebox-footer">
      <div class="footer-send">
         <div class="footer-send-tools">
            
            <div class="footer-send-tools-left">
              <!-- 表情发送 -->
              <common-emoji
                style="margin-right: 14px"
                ref="commonEmoji"
                :input-ref="$refs.replyInput"
                :disabled="disabled"
                @setEmoji="setEmoji"
                mode="im"
              >
              </common-emoji>
              <!-- 快捷回复组件 -->
              <quick-reply
                style="margin-right: 14px"
                :hx-id-obj="hxIdObj"
                :source="source"
                :disabled="disabled"
                :CurrentConversationInfo="CurrentConversationInfo"
              ></quick-reply>
              <!-- 上传图片组件 -->
              <upload-image
                style="margin-right: 14px"
                :hx-id-obj="hxIdObj"
                :source="source"
                :disabled="disabled"
              ></upload-image>
              <!-- 上传文件组件 -->
              <upload-file
                style="margin-right: 14px"
                :hx-id-obj="hxIdObj"
                :source="source"
                :disabled="disabled"
              ></upload-file>
              <VideoCustomer
                :disabled="disabled"
                :im-config="imConfig"
                @SetMessage="SetMessage"
                :source="source"
                :conversation-id="hxIdObj.conversationId"
                :customer-service-number="customerServiceNumber"
                :im-setting-config="ImSettingConfig"
                :hx-id-obj="hxIdObj"
              />
            </div>
            
            <div class="footer-send-tools-right">
              <AutoAIReplySwitch
                v-if="isCanAutoAIReply"
                @change="onChangeAIAutoReply"
              >
              </AutoAIReplySwitch>
            </div>
            
        </div>
        <!-- 消息输入框 -->
        <inputEdit
          ref="inputEdit" 
          :hxIdObj="hxIdObj"
          :disabled="disabled"
          :source="source"
          v-if="showInputEdit"
        />
      </div>
    </div>
    <!-- 会话转交弹窗 -->
    <SessionTransferDialog :conversationId="conversationId" ref="SessionTransferDialog" @SaveCallBack="SaveForwarding" />
    <!-- 邮件回复 -->
    <MailEdit 
      v-if="showMailEdit"
      @toggleMailEdit="toggleMailEdit"
      ref="MailEdit" 
    />
  </div>
</template>

<script>
import * as IMApi from '@src/api/ImApi.js';
import { formatDate } from 'pub-bbx-utils';
import EventBus from '@src/util/eventBus';
import QuickReply from './quickReply.vue';
import UploadFile from './uploadFile.vue';
import UploadImage from './uploadImage.vue';
import ChatMixin from '../../../ChatMixin';
import commonEmoji from '@src/component/emoji';
import VideoCustomer from './VideoCustomer';
import chattingRecords from './chattingRecords/index.vue';
import OfflineMessage from '@src/modules/im/imChat/components/messageBox/chattingRecords/components/OfflineMessage.vue';
import inputEdit from 'src/modules/im/imChat/components/messageBox/inputEdit/index.vue'
import SessionTransferDialog from '@src/modules/im/components/SessionTransferDialog.vue'
import Avatar from '@src/modules/im/imChat/components/messageBox/chattingRecords/components/Avatar.vue'
import MailEdit from '@src/modules/im/imChat/components/messageBox/MailEdit.vue'
import AutoAIReplySwitch from '@src/modules/im/imChat/components/messageBox/AutoAIReplySwitch'
/* util */
import { isOpenData } from '@src/util/platform';
import { getRootWindow } from '@src/util/dom';
import { safeNewDate } from '@src/util/time';
/** api */
import { customerServiceSendNewMessage } from '@src/modules/im/imChat/components/messageBox/send.js';
import { queryIMRobotId } from '@src/api/AIApi';
/* hooks */
import { initChat } from '@src/api/LLMApi'
import { useTenantId, useRootUser } from '@hooks/useRootWindow'
import { useEnv } from "@hooks/useEnv"
/* model */
import { ChatSourceDocumentTypeEnum } from "@src/component/business/BizChatPanel/chat/model"

import i18n from '@src/locales'
import MsgModel from '@model/MsgModel';
export default {
  name: 'message-box',
  inject: ['initData'],
  mixins: [ChatMixin],
  setup() {
    
    const { isDev } = useEnv()
    const tenantId = useTenantId()
    const loginUser = useRootUser()
    
    return {
      tenantId,
      loginUser,
      isDev
    }
    
  },
  data() {
    return {
      imConfig: {},
      isOpenData,
      message: '',
      loadMore: false,
      ForwardingRules: {
        customerServiceId: {
          required: true,
          message: i18n.t('im.imChat.components.messageBox.message.tips2'),
          trigger: ['blur'],
        },
      },
      showInputEdit:true,
      showMailEdit: false, // 邮件回复模块
      // AI机器人 id
      aiRobotId: '',
      // AI机器人 appId
      aiRobotAppId: '',
      aiAutoReply: false,
    };
  },
  components: {
    QuickReply,
    UploadFile,
    UploadImage,
    VideoCustomer,
    [commonEmoji.name]: commonEmoji,
    chattingRecords,
    OfflineMessage,
    inputEdit,
    SessionTransferDialog,
    Avatar,
    MailEdit,
    AutoAIReplySwitch
  },
  filters: {
    formatDate(value) {
      return formatDate(value, 'YYYY-MM-DD HH:mm:ss');
    },
    InitializationTime(value) {
      if (typeof value === 'string') {
        let time = value.slice(0, 19);
        return (
          safeNewDate(time).getTime()
          + safeNewDate().getTimezoneOffset() * 60 * 1000 * -1
        );
      }
      return value;
    },
  },
  props: {
    ImSettingConfig: {
      type: Object,
      default: () => ({}),
    },
    conversationStatus: {
      type: [Number, String],
    },
    timeOut: {
      type: [Number, Boolean],
    },
    msgList: {
      type: Array,
    },
    customerServiceNumber: {
      type: String,
    },
    conversationNumber: {
      type: String,
    },
    hxIdObj: {
      type: Object,
    },
    customerList: {
      type: Array,
    },
    userDetail: {
      type: Object,
    },
    isLoadMore: {
      type: Boolean,
    },
    isShowMore: {
      type: Boolean,
    },
    source: {
      type: String,
    },
    RequiredNotes: {
      type: Boolean,
    },
    conversationId: {
      type: [Number, String],
    },
    CurrentConversationInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    isKnown() {
      return this.userDetail?.isKnown == 1
    },
    customerName() {
      return (this.userDetail && this.userDetail.customerName) || '';
    },
    linkmanName() {
      return (this.userDetail && this.userDetail.linkmanName) || '';
    },
    linkmanPhone() {
      return (this.userDetail && this.userDetail.linkmanPhone) || '';
    },
    isWeChat() {
      return this.source == 'weChat';
    },
    isIm() {
      return this.source == 'im';
    },
    isMail() {
      return this.source == 'emailService';
    },
    openVideoCallService() {
      const rootWindow = getRootWindow(window);
      return JSON.parse(rootWindow._init)?.openVideoCallService || false;
    },
    isTourist() {
      return this.userDetail?.registerType === 4;
    },
    customerOnline(){
      return this.userDetail?.customerOnline
    },
    notifyStatusStr(){
      return this.userDetail?.notifyStatusStr ?? 0
    },
    showOfflineMessage(){
      const isImChat = window.location.href.includes('/im/imChat')
      // 当前页面路径是chat且客户来源是im且客户为离线状态且客户没有发送过离线消息且客户不是游客
      return isImChat && this.source == 'im' && !this.customerOnline && this.notifyStatusStr != 0 && !this.isTourist
    },
    linkmanEmail(){
      return this.userDetail?.linkmanEmail ?? ''
    },
    disabled(){
      return !this.hxIdObj.conversationId || this.conversationStatus === 3
    },
    clientName(){
      if(this.isKnown || this.isWeChat) return this.linkmanName
      if(!this.isWeChat && !this.isKnown) return (this.linkmanPhone || this.linkmanEmail)
      return ''
    },
    hasUserDetail(){
      try {
        return JSON.stringify(this.userDetail) != '{}'
      } catch(err){
        return false
      }
    },
    isCommonIm() {
      return ['', 'im', 'weChat'].includes(this.source)
    },
    isMailIm() {
      return this.source === 'emailService'
    },
    titleName() {
      if(this.isKnown) {
        // 已知联系人
        if(this.isWeChat || this.isIm) return this.CurrentConversationInfo.titleName
        if(this.isMail) return this.linkmanEmail
      } else { 
        // 未知联系人
        if(this.isWeChat) return this.CurrentConversationInfo.titleName
        if(this.isIm )return this.CurrentConversationInfo.titleName || this.linkmanEmail || ''
        if(this.isMail) return this.linkmanEmail
      }
      return ''
    },
    tagIcon() {
      if(this.isWeChat) return 'icon-weixin5'
      if(this.isMail) return 'icon-mail-fill1'
      return ''
    },
    /** 
     * @description 是否有 AI 的灰度
    */
    isHaveAIGray() {
      const RootWindow = getRootWindow(window)
      return Boolean(RootWindow?.grayAuth?.chat_GPT)
    },
    isCanAutoAIReply() {
      return this.isHaveAIGray && this.aiRobotId && this.aiRobotAppId
    }
  },
  created() {
    this.scollBottom();
    EventBus.$on('addMessageByKF', this.addMessageByKF);
    // sendReply im快捷回复
    EventBus.$on('sendReply', message => {
      this.$nextTick(()=>{
        this.$refs.inputEdit.getFocus()
        this.$refs.inputEdit?.insertText(message)
      })
    });
    EventBus.$on('replyEmail', this.replyEmail);
    EventBus.$on('emailServiceShareWiki', this.emailServiceShareWiki);

    this.imGetConfig();
  },
  destroyed() {
    EventBus.$off('addMessageByKF');
    EventBus.$off('sendReply');
    EventBus.$off('replyEmail');
    EventBus.$off('emailServiceShareWiki');
  },
  watch: {
    msgList(val) {
      if (!this.loadMore && !this.showMore && !this.isLoadMore) {
        this.scollBottom();
      }
    },
    conversationId:{
      handler(){
        this.reloadInputEdit()
        this.showMailEdit = false
      },
      immediate:true
    }
  },
  methods: {
    reloadInputEdit() {
      this.showInputEdit = false;
      this.$nextTick(() => {
        this.showInputEdit = true;
      });
    },
    imGetConfig() {
      IMApi.imGetConfig().then(res => {
        if (res.status === 0) {
          this.imConfig = res.data;
        }
      });
    },
    // 语音上传后的oss地址
    VoiceUploadData(data) {
      console.log(data);
    },
    EndSession() {
      if (this.RequiredNotes) {
        // 服务备注在编辑状态，提示并切换至服务备注
        this.$confirm(this.$t('im.imChat.components.messageBox.message.tips3'), this.$t('common.base.toast'), {
          confirmButtonText: this.$t('common.base.confirm'),
          cancelButtonText: this.$t('common.base.cancel'),
          closeOnClickModal: false,
          type: 'warning',
        })
          .then(() => {
            this.$emit('Tab', 'Four');
          })
          .catch(() => {});
      } else {
        this.finished();
      }
    },
    finished() {
      this.$confirm(this.$t('im.imChat.components.messageBox.message.tips4'), this.$t('common.base.toast'), {
        confirmButtonText: this.$t('common.base.confirm'),
        cancelButtonText: this.$t('common.base.cancel'),
        closeOnClickModal: false,
        type: 'warning',
      })
        .then(() => {
          IMApi.finished({
            conversationId: this.hxIdObj.conversationId,
          }).then(res => {
            if (res.code === 0) {
              this.$message({
                message: this.$t('im.detail.btn3'),
                type: 'success',
              });
              this.$emit('refresh');
            } else {
              if (res.code === 6024) {
                this.$emit('Tab', 'Four');
              }
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {});
    },
    SetMessage(info) {
      // 发送文本消息，下版本发送图文消息删除
      setTimeout(() => {
        let host = `${window.location.protocol}//${ window.location.host}`
        console.log(host)
        this.$platform.openTab({
          id: `M_CASE_VIDEOCUSTOMER_${info.roomID}`,
          title: this.$t('common.pageTitle.otherPageTitle.videoCustomerService'),
          close: true,
          url: `${host}/trtc/pub-live-house?conversationId=${
            info.conversationId
          }&roomID=${info.roomID}&tenantId=${info.tenantId}&userID=${
            info.userID
          }&userType=${
            info.userType
          }&useStringRoomID=true&userId=${`userId_${Date.now()}${
            Math.random() * 100
          }`}`,
        });
      }, 400);
    },
    // 渲染客服主动发的消息
    addMessageByKF(msg) {
      EventBus.$emit('updatedMsgList',{type:'pushMsg',msg})
      this.scollBottom();
    },
    loadMoreMsgs() {
      this.loadMore = true;
      this.showMore = false;
      let { conversationId = '' } = this.hxIdObj;
      this.$emit('loadMore', { conversationId, isLoadMore: true });
    },
    async sendPrivateText(message) {
      await this.sendMsg(message)
    },
    async sendMsg(msg){
      try{
        const params = {
          conversationId:this.hxIdObj.conversationId,
          messageType:'txt',
          messageContent:{
            msg:msg.replace(/^\s+|\s+$/g, '')
          }
        }
        const messageInfo = await customerServiceSendNewMessage(params)
        EventBus.$emit('updatedMsgList',{type:'pushMsg',msg:messageInfo})
        this.scollBottom();
      }catch(err){
        console.log(err)
      }

    },
    onSendTextMsg(e) {
      if (e.keyCode == 13 && e.ctrlKey) {
        this.message += '\n';
      } else if (e.keyCode == 13 || e.type == 'click') {
        if (this.message.trim() == '') {
          this.message = '';
          return;
        }
        this.sendPrivateText(this.message);
        this.message = '';
        e.preventDefault();
      }
    },
    scollBottom() {
      this.$nextTick(() => {
        setTimeout(()=>{
          const dom = this.$refs.msgContent;
          if (!dom) return;
          dom.$el.scrollTop = dom.$el.scrollHeight;
        }, 100)
      });
    },
    SessionForwarding() {
      this.$refs.SessionTransferDialog.open()
    },
    // 会话转交——提交
    SaveForwarding(){
      setTimeout(() => {
        const fromId = window.frameElement.getAttribute('id');
        this.$platform.refreshTab(fromId);
      }, 2000);
    },
    // 邀请游客登录
    invitedToLogin() {
      this.$confirm(this.$t('im.imChat.components.messageBox.message.tips6'), this.$t('common.base.toast'), {
        confirmButtonText: this.$t('common.base.confirm'),
        cancelButtonText: this.$t('common.base.cancel'),
        type: 'warning',
      }).then(async () => {
        try {
          const params = {
            conversationId: this.hxIdObj.conversationId,
          };
          const { code, data, message } = await IMApi.inviteTouristLogin(
            params
          );
          if (code == 0) {
            EventBus.$emit('addMessageByKF', data);
          } else {
            this.$message.error(message);
          }
        } catch (err) {
          this.$message.error(this.$t('im.imChat.components.messageBox.message.tips7'));
        }
      });
    },
    setEmoji(txt){
      this.$nextTick(()=>{
        this.$refs.inputEdit.getFocus()
        this.$refs.inputEdit?.setEmoji(txt)
      })
    },
    toggleMailEdit(val){
      this.showMailEdit = val
    },
    async replyEmail(id) {
      let data = null;
      if (id == -1) {
        try {
          // 从顶部栏点击的回复，取客户最后一条发送的消息作为回复消息
          const res = await IMApi.getNewEmail({ imConversationId: this.conversationId });
          if (res.code == 0){
            data = res.data
          } else {
            return this.$message.error(res.message)
          }
        } catch (error) {
          console.error('catch', error);
        }
      } else {
        data = this.msgList.find(v => v.id == id);
      }
      this.toggleMailEdit(true);
      this.$nextTick(() => {
        this.$refs.MailEdit.init(data);
      });
    },
    emailServiceShareWiki(data) {
      if(!this.showMailEdit) {
        return this.$message.warning(this.$t('im.imChat.components.mailChat.text10'))
      }
      const url = `${window.location.protocol}//${window.location.host}/shb/home/v_open/wiki/view?wikiId=${data.id}`
      const html = `<a target="_blank" href='${url}'>${data.title}</a>`
      this.$refs.MailEdit.dangerouslyInsertHtml(html)
    },
    async queryIMRobotId() {
      try {
        const result = await queryIMRobotId()
        const isFail = MsgModel.isFail(result)
        
        if (isFail) {
          console.error('queryIMRobotId fail: ', result)
          return
        }
        
        const data = MsgModel.getData(result, {})
        const aiRobotId = data.robotId
        const aiRobotAppId = data.robotAppId
        
        this.aiRobotId = aiRobotId
        this.aiRobotAppId = aiRobotAppId
        
      } catch (error) {
        console.error('queryIMRobotId error: ', error);
      }
    },
    async fetchAIInit() {
      
      // 如果没有开启灰度，不需要初始化
      if (!this.isHaveAIGray) {
        return
      }
      
      if (!this.aiRobotId || !this.aiRobotAppId) {
        await this.queryIMRobotId()
      }
      
      if (!this.aiRobotId || !this.aiRobotAppId) {
        console.warn('aiRobotId or aiRobotAppId is empty')
        return
      }
      
      let params = {
        tenantId: this.tenantId,
        userId: this.loginUser.userId,
        conversationId: this.conversationId,
        businessId: this.conversationId,
        type: ChatSourceDocumentTypeEnum.IM,
        robotId: this.aiRobotId,
        appId: this.aiRobotAppId,
        isExternal: true,
        stream: true
      }
      
      console.log('initChat params: ', params)
      
      // if (this.isDev) {
      //   params = {
      //     ...params,
      //     tenantId: '85c4d9182a09b612adb57957ffeb736f',
      //     userId: 'ee33bf10-d659-11ec-9d05-00163e304a25',
      //   }
      // } 
      
      await initChat(params)
      
    },
    onChangeAIAutoReply(value) {
      this.aiAutoReply = value
    }
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-button--danger:hover {
  background: #ff7875;
  border-color: #ff7875;
  color: #ffffff;
}
::v-deep .el-button--danger:focus {
  background: #ff7875;
  border-color: #ff7875;
  color: #ffffff;
}
.messagebox {
  width: calc(100% - 310px - 298px);
  background: #fff;
  position: relative;
  // border: 1px solid #eee;
  .message-header {
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
    background: #fff;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header-left {
      display: flex;
      align-items: center;
      .custom-head {
        img {
          width: 32px;
          height: 32px;
        }
        margin: 0 12px 0 15px;
      }

      .custom-info {
        .custom-name {
          font-size: 14px;
          font-weight: 600;
          color: #000000;
          display: flex;
          align-items: center;
          @include text-ellipsis();
          .tag-icon {
            font-size: 10px;
            font-weight: 400;
            margin-left: 4px;
            &.icon-weixin5 {
              color: #20cc62;
            }
            &.icon-mail-fill1 {
              color: #03AEFD;
            }
          }
          .loginStatus{
            width: 50px;
            height: 22px;
            border-radius: 11px;
            font-size: 12px;
            margin-left: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            .quan{
              width: 6px;
              height: 6px;
              border-radius: 50%;
            }
            .text{
              margin-left: 4px;
            }
            &.in {
              background: #F6FFED;
              border: 1px solid #D9F7BE;
              .quan{
                background-color: #52C41A;
              }
              .text{
                color: #52C41A;
              }
            }
            &.out {
              background: #F5F5F5;
              border: 1px solid #D9D9D9;
              .quan{
                background-color: #8C8C8C;
              }
              .text{
                color: #8C8C8C;
              }
            }
          }
        }
        .custom-company {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
      }
    }
    .header-right {
      padding-right: 16px;
      margin-left: 16px;
      overflow-x: auto;
      display: flex;
    }
  }
  .messagebox-content{
    height: calc(100% - 226px);
    position: relative;
    display: flex;
    flex-direction: column;
    &.messagebox-content-full {
      height: calc(100% - 48px);
    }
    .messagebox-content-bottom{
      position: sticky;
      left: 0;
      bottom: 0;
      height: auto;
    }
  }
  .messagebox-footer {
    height: 168px;
    position: relative;
    border-top: 1px solid #e8e8e8;
    color: rgba(0, 0, 0, 0.65);
    background: #fff;

    .select-section {
      height: 42px;
      line-height: 42px;
      margin-left: 24px;
      i {
        font-size: 16px;
      }
    }
    .footer-send {
      padding: 8px 10px 0;
      text-align: left;
      box-sizing: border-box;
      font-size: 14px;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .footer-send-tools{
        // display: flex;
        ::v-deep .common-emoji{
          top: 0;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.common-emoji {
  position: relative !important;
  display: inline-block !important;
  right: 0 !important;
  transform: none !important;
}
.voice_play {
  animation-name: voicePlay;
  animation-duration: 1s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: steps(3);
}

@keyframes voicePlay {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 100%;
  }
}
.ForwardingTitle {
  font-size: 14px;
  font-weight: 400;
  color: #f6a136;
  line-height: 20px;
  margin-top: 10px;
  padding-left: 33px;
  position: relative;
  span {
    position: absolute;
    left: 0;
    color: #595959;
  }
}
.icon {
}
.info-imageCode {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  .info-text {
    width: 100%;
    text-align: center;
    font-weight: bold;
  }
  .info-image {
    width: 120px !important;
    height: 120px !important;
    margin: 13px 0;
  }
}

.footer-send-tools {
  display: flex;
  justify-content: space-between;
}
</style>
